<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">线状图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-1"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">线状堆积图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-2"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">面形图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-3"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">面形堆积图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-4"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">柱状图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-5"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">柱状堆积图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-6"></div>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">散点图</div>
                <div class="layui-card-body">
                    <div class="vip-demo-box" id="graph-7"></div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="../js/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.1.0/rickshaw.min.js"></script>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('layer',function(){
    var $ = layui.$;

    var graph1 = new Rickshaw.Graph({
        element: document.querySelector("#graph-1"),
        renderer: 'line',
        series: [
            {
                data: [{ x: 0, y: 13 }, { x: 1, y: 25 }, { x: 2, y: 38 }, { x: 3, y: 44 }, { x: 4, y: 58 }],
                color: '#1E9FFF'
            }
        ]
    });

    var graph2 = new Rickshaw.Graph({
        element: document.querySelector("#graph-2"),
        renderer: 'line',
        series: [
            {
                data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }],
                color: '#1E9FFF'
            }, {
                data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 }],
                color: 'orange'
            }]
    });

    var graph3 = new Rickshaw.Graph({
        element: document.querySelector("#graph-3"),
        renderer: 'area',
        series: [
            {
                data: [{ x: 0, y: 13 }, { x: 1, y: 25 }, { x: 2, y: 38 }, { x: 3, y: 44 }, { x: 4, y: 58 }],
                color: 'rgb(26, 179, 148)'
            }
        ]
    });

    var graph4 = new Rickshaw.Graph({
        element: document.querySelector("#graph-4"),
        renderer: 'area',
        series: [
            {
                data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }],
                color: 'rgb(26, 179, 148)'
            }, {
                data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 }],
                color: 'rgb(238, 238, 238)'
            }]
    });

    var graph5 = new Rickshaw.Graph({
        element: document.querySelector("#graph-5"),
        renderer: 'bar',
        series: [
            {
                data: [{ x: 0, y: 13 }, { x: 1, y: 25 }, { x: 2, y: 38 }, { x: 3, y: 44 }, { x: 4, y: 58 }],
                color: 'rgb(26, 179, 148)'
            }
        ]
    });

    var graph6 = new Rickshaw.Graph({
        element: document.querySelector("#graph-6"),
        renderer: 'bar',
        series: [
            {
                data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }],
                color: 'rgb(26, 179, 148)'
            }, {
                data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 }],
                color: 'rgb(238, 238, 238)'
            }]
    });

    var graph7 = new Rickshaw.Graph({
        element: document.querySelector("#graph-7"),
        renderer: "scatterplot",
        series: [
            {
                data: [{ x: 0, y: 40 }, { x: 1, y: 44 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }],
                color: 'rgb(26, 179, 148)'
            }, {
                data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 }],
                color: 'orange'
            }]
    });

    function init(){
        graph1.render();
        graph2.render();
        graph3.render();
        graph4.render();
        graph5.render();
        graph6.render();
        graph7.render();
    }

    $(window).on('resize',function(){
        init();
    });

    init();

});
</script>
</body>
</html>